<script setup>
import { ref } from "vue";
import { userPasswordUpdateService } from "@/api/user.js";
import { useUserInfoStore } from "@/stores/userInfo.js";
import router from "@/router";
import { ElMessage } from "element-plus";

const form = ref(null);
// 用户密码
const userInfo = ref({
    old_pwd: "",
    new_pwd: "",
    re_pwd: "",
});
// 校验密码函数
const checkRePassWord = (rule, value, callback) => {
    if (value == "") {
        callback(new Error("请再次输入密码"));
    } else if (value != userInfo.value.new_pwd) {
        callback(new Error("两次输入密码不一致"));
    } else {
        callback();
    }
};
// 密码格式验证函数
const isValidPassword = (value) => /^[A-Za-z0-9]+$/.test(value);
// 表单验证规则
const rules = {
    old_pwd: [
        { required: true, message: "请输入原密码", trigger: "blur" },
        {
            pattern: /^\S{5,16}$/,
            message: "长度5-10位的非空字符串",
            trigger: "blur",
        },
    ],
    new_pwd: [
        { required: true, message: "请输入新密码", trigger: "blur" },
        {
            validator: (rule, value, callback) => {
                if (!isValidPassword(value)) {
                    callback(new Error("密码只能包含字母和数字"));
                } else if (value.length < 5 || value.length > 16) {
                    callback(new Error("密码长度在5到16个字符"));
                } else {
                    callback();
                }
            },
            trigger: "blur",
        },
    ],
    re_pwd: [
        { required: true, message: "请再次输入密码", trigger: "blur" },
        { validator: checkRePassWord, trigger: "blur" },
    ],
};

const userInfoStore = useUserInfoStore();
// 调用函数
const updateUserPassword = async () => {
    // 验证表单
    form.value.validate(async (valid) => {
        if (valid) {
            // 调用接口
            let result = await userPasswordUpdateService(userInfo.value);
            ElMessage.success(result.message ? result.message : "修改成功");

            // 清空token
            userInfoStore.setToken("");

            // 跳转到登录页面
            router.push("/login");
        } else {
            ElMessage.error("请检查输入的内容");
        }
    });
};
</script>
<template>
    <el-main>
        <el-card class="page-container">
            <template #header>
                <div class="header">
                    <span>修改密码</span>
                </div>
            </template>
            <el-row>
                <el-col :span="12">
                    <el-form
                        ref="form"
                        :model="userInfo"
                        :rules="rules"
                        label-width="100px"
                        size="large"
                    >
                        <el-form-item label="原密码" prop="old_pwd">
                            <el-input v-model="userInfo.old_pwd"></el-input>
                        </el-form-item>
                        <el-form-item label="新密码" prop="new_pwd">
                            <el-input v-model="userInfo.new_pwd"></el-input>
                        </el-form-item>
                        <el-form-item label="确认密码" prop="re_pwd">
                            <el-input
                                v-model="userInfo.re_pwd"
                                type="password"
                            ></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button
                                type="primary"
                                @click="updateUserPassword"
                                >提交修改</el-button
                            >
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </el-card>
    </el-main>
</template>

<style scoped>
.page-container {
    width: 85%;
    border-radius: 15px;
}
</style>